<!-- 智能压浆数据 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="show ? rowObj.T1 : rowObj.F1" :xs="show ? rowObj.T2 : rowObj.F2">
        <workSiteLeft ref="workSiteLeft" :show="show" @showLeft="showLeft" @queryVal="queryVal" />
      </el-col>

      <el-col :span="show ? rowObj.T3 : rowObj.F3" :xs="show ? rowObj.T4 : rowObj.F4">
        <el-button size="mini" :icon="show ? 'el-icon-s-fold' : 'el-icon-s-unfold'" circle
          @click="showLeft(show)"></el-button>
        压浆记录数据
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" class="elForm">
          <div>
            <el-form-item label="梁场名称" prop="deviceId">
              <el-select style="width: 140px" filterable v-model="queryParams.deviceName" clearable size="mini"
                placeholder="请选择梁场名称">
                <el-option v-for="item in materielDeviceList" :key="item.id" :label="item.name"
                  :value="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="梁号" prop="beamNumber">
              <el-input style="width: 100px" v-model="queryParams.beamNumber" placeholder="梁号" clearable
                @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item label="施工日期" prop="id">
              <deatetime ref="deatetime" v-model="queryParams.time"></deatetime>
            </el-form-item>

            <el-form-item label="是否合格" prop="status">
              <el-select style="width: 120px" v-model="queryParams.status" clearable size="mini" placeholder="请选择">
                <el-option v-for="item in statusList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="设备编号" prop="code">
              <el-select style="width: 170px" v-model="queryParams.code" clearable size="mini" placeholder="请选择">
                <el-option v-for="item in codeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
                v-hasPermi="['znzlyj:record:query']">搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </div>

          <div>
            <el-form-item>
              <el-button type="success" icon="el-icon-thumb" size="mini" v-hasPermi="['znzlyj:record:collectTest']"
                :loading="warningLoading" @click="handleCollectData">数据采集测试</el-button>
            </el-form-item>

            <el-form-item>
              <el-button type="success" icon="el-icon-thumb" size="mini" v-hasPermi="['znzlyj:record:check']"
                :loading="checkLoading" @click="handleCheck">手动校验</el-button>
            </el-form-item>
          </div>
        </el-form>

        <el-table border v-loading="loading" :data="recordList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" fixed />
          <!-- <el-table-column label="所属单位" align="center" prop="deptName" min-width="120" show-overflow-tooltip/> -->
          <el-table-column label="梁场名称" align="center" prop="deviceName" min-width="140" show-overflow-tooltip />
          <el-table-column label="设备名称" align="center" prop="instrumentManufacturer" min-width="160" show-overflow-tooltip />
          <el-table-column label="设备编号" align="center" prop="mCode" min-width="160" show-overflow-tooltip />
          <el-table-column label="张拉梁型" align="center" prop="tensioningBeamType" width="100" show-overflow-tooltip />
          <el-table-column label="梁号" align="center" prop="beamNumber" width="90" show-overflow-tooltip />
          <el-table-column label="桩号" align="center" prop="pileNumber" width="90" show-overflow-tooltip />
          <el-table-column label="压浆日期" align="center" prop="groutingDate" width="110">
            <template slot-scope="scope"><span>{{ parseTime(scope.row.groutingDate, "{y}-{m}-{d}") }}</span></template>
          </el-table-column>
          <el-table-column label="压浆剂" align="center" prop="groutAgent" width="90" show-overflow-tooltip />
          <el-table-column label="水泥" align="center" prop="cement" width="80" show-overflow-tooltip />
          <el-table-column label="值班人员" align="center" prop="dutyPersonnel" width="80" show-overflow-tooltip />
          <el-table-column label="孔道数" align="center" prop="boreholeCount" width="80" show-overflow-tooltip />
          <el-table-column label="压浆方向" align="center" prop="groutingDirection" width="90" show-overflow-tooltip />
          <el-table-column label="步骤次数" align="center" prop="stepCount" width="80" show-overflow-tooltip />
          <el-table-column label="步骤参数" align="center" prop="stepParameters" min-width="160" show-overflow-tooltip />
          <el-table-column label="初始流动速度" align="center" prop="initialFlowVelocity" min-width="110"
            show-overflow-tooltip />
          <el-table-column label="流动度(s)" align="center" prop="flowabilityS" min-width="90" show-overflow-tooltip />
          <el-table-column label="是否合格" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.status == "1" ? "合格" : (scope.row.status == "0" ? "不合格" : "未校验") }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="300" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-edit"
                @click="result_handleDetails(scope.row)">结果数据</el-button>
              <el-button size="mini" type="text" icon="el-icon-edit" @click="result_handleUpdate(scope.row)"
                v-hasPermi="['znzlyj:record:editing']">报表编辑</el-button>
              <el-button size="mini" type="text" icon="el-icon-tickets" @click="handleReportForms(scope.row)"
                v-hasPermi="['znzlyj:record:preview']">报表预览</el-button>
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)"
                         v-hasPermi="['znzlyj:record:edit']">修改</el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </el-col>
    </el-row>

    <!-- 压浆结果数据对话框 -->
    <el-dialog title="压浆结果数据" :visible.sync="open" width="100%" append-to-body>
      <el-table border v-loading="loading" :data="znyj_resultList" max-height="600">

        <el-table-column label="设备编号" align="center" prop="deviceNumber" min-width="120" show-overflow-tooltip fixed />
        <el-table-column label="梁号" align="center" prop="beamNumber" width="90" show-overflow-tooltip />
        <el-table-column label="孔号" align="center" prop="holeNumber" width="100" show-overflow-tooltip />
        <el-table-column label="压浆模式" align="center" prop="groutingMode" width="90" show-overflow-tooltip />
        <el-table-column label="压浆日期" align="center" prop="groutingDate" width="100">
          <template slot-scope="scope"><span>{{ parseTime(scope.row.groutingDate, "{y}-{m}-{d}") }}</span></template>
        </el-table-column>
        <el-table-column label="配合比" align="center" prop="mixRatio" min-width="120" show-overflow-tooltip />
        <el-table-column label="水胶比" align="center" prop="waterCementRatio" width="90" show-overflow-tooltip />
        <el-table-column label="搅拌时间(s)" align="center" prop="mixingTime" width="100" show-overflow-tooltip />
        <el-table-column label="压浆开始时间" align="center" prop="startTime" width="150">
          <template slot-scope="scope"><span>{{ parseTime(scope.row.startTime) }}</span></template>
        </el-table-column>
        <el-table-column label="压浆结束时间" align="center" prop="endTime" width="150">
          <template slot-scope="scope"><span>{{ parseTime(scope.row.endTime) }}</span></template>
        </el-table-column>
        <el-table-column label="进浆压力(MPa)" align="center" prop="inflowPressure" min-width="110" show-overflow-tooltip>
<!--          <template slot-scope="scope">{{ fun(scope.row.inflowPressure) }}</template>-->
        </el-table-column>
        <el-table-column label="返浆压力(MPa)" align="center" prop="backflowPressure" min-width="110" show-overflow-tooltip />
        <el-table-column label="持压时间(s)" align="center" prop="holdingTime" width="100" show-overflow-tooltip />
        <el-table-column label="进浆量(L)" align="center" prop="inflowVolume" width="90" show-overflow-tooltip />
        <el-table-column label="论进浆量(L)" align="center" prop="theoreticalInflowVolume" width="90" show-overflow-tooltip />
        <el-table-column label="真空泵压力(MPa)" align="center" prop="vacuumPumpPressure" width="125" show-overflow-tooltip />
        <el-table-column label="状态" align="center" prop="status" fixed="right" width="80" v-if="false"/>
        <!-- <template slot-scope="scope">
              <span>{{ scope.row.status == "1" ? "合格" : (scope.row.status == "0" ? "不合格" : "未校验") }}</span>
            </template>
          </el-table-column> -->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-view" @click="process_handleDetails(scope.row)">过程数据</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-show="totalTwo > 0" :total="totalTwo" :page.sync="queryParamsTwo.pageNum"
        :limit.sync="queryParamsTwo.pageSize" @pagination="getDetailsList" />

      <!-- Echart图 -->
      <!-- <div class="chartBox">
        <div id="dayChart" style="`width: 100%;height: 100%;transform-origin: 0 0;`"></div>
      </div> -->

      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="cancel">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 压浆过程数据对话框 -->
    <el-dialog title="张拉过程数据" :visible.sync="processOpen" width="80%" append-to-body>
      <el-table border v-loading="processLoading" :data="processList" max-height="500">
        <el-table-column prop="deviceNumber" label="设备编号" align="center" min-width="120px" show-overflow-tooltip />
        <el-table-column prop="beamNumber" label="梁号" align="center" min-width="120px" show-overflow-tooltip />
        <el-table-column prop="holeNumber" label="孔号" align="center" width="200px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="processDate" label="时间" align="center" width="220px"></el-table-column>
        <el-table-column prop="enterPressure" label="注浆口压力" align="center" width="200px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="returnPressure" label="回浆口压力" align="center" width="200px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="vacuumPressure" label="真空泵压力" align="center" width="200px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="flow" label="流量" align="center" width="200px" show-overflow-tooltip></el-table-column>
      </el-table>

      <pagination v-show="totalProcess > 0" :total="totalProcess" :page.sync="queryParamsProcess.pageNum"
                  :limit.sync="queryParamsProcess.pageSize" @pagination="process_handleDetails" />

      <!-- Echart图 -->
      <div class="chartBox">
        压浆机实时曲线
        <div id="processDayChart" style="width: 100%;height: 100%;transform-origin: 0 0;"></div>
      </div>
    </el-dialog>

    <!-- 报表预览 -->
    <yi-dialog title="报表预览" ref="dialogReportForms" :visible.sync="dialogVisible_report" width="60%" fullscreen isHandle
      :isConfirm="false" top="10vh">
      <!-- class="render-report" -->
      <ReportRender ref="ReportRender"></ReportRender>
      <!-- <TabsRender ref="TabsRender" @rederOver="rederOver"></TabsRender> -->
      <div slot="more" class="more">
        <el-button class="print" type="primary" icon="el-icon-printer" size="small" @click="print()"
          v-hasPermi="['znzlyj:record:export']">打印/导出</el-button>
      </div>
    </yi-dialog>

    <!-- 报表编辑 -->
    <yi-dialog title="报表编辑" class="render-dialog" :visible.sync="dialogVisible_reportEdit" width="60%" fullscreen isHandle
      :isConfirm="false" top="0vh">
      <div style="width: 920px;height: 1160px;margin-left: 72px;">
        <ReportRender v-if="dialogVisible_reportEdit" ref="ReportRender"></ReportRender>
      </div>
      <div slot="more" class="more">
        <el-button type="primary" size="small" @click="uploadImgYj()">添加压浆顺序图</el-button>
        <el-button type="primary" size="small" icon="el-icon-picture" @click="save()">保存</el-button>
      </div>
    </yi-dialog>

    <el-dialog title="添加压浆顺序图" :visible.sync="uploadImgYjDialog" width="420px">
      <el-form ref="imgForm" :model="imgForm" label-width="90px">
        <el-form-item label="压浆顺序图" prop="fileUrl">
          <imageUpload ref="fileUrlUpload" v-model="imgForm.imgUrl" :limit="1" @input='successImgForm' />
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editSubmitFormImg">确 定</el-button>
        <el-button @click="uploadImgYjDialog = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 报表编辑 -->
    <!-- <el-dialog title="压浆报表编辑" :visible.sync="centerDialogVisible" width="80%" @close="centerDialogVisibleClose">
      <el-form ref="form" :model="form" :rules="rules" label-width="160px">
        <el-row :gutter="20">
          <el-col :span="6"><el-form-item label="桩号" prop="pileNumber"><el-input v-model="form.pileNumber"
                placeholder="桩号" style="width: 240px;" /></el-form-item></el-col>
          <el-col :span="6"><el-form-item label="梁号" prop="beamNumber" label-width="116px"><el-input
                v-model="form.beamNumber" placeholder="梁号" style="width: 240px;" /></el-form-item></el-col>
          <el-col :span="12">
            <el-form-item label="施工日期" prop="sgDate">
              <el-date-picker clearable v-model="form.sgDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择施工日期"
                style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12"><el-form-item label="水泥品种及标号" prop="snpzbh"><el-input v-model="form.snpzbh"
                placeholder="水泥品种及标号" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="外加剂掺量(%)" prop="wjj"><el-input v-model="form.wjj"
                placeholder="外加剂掺量(%)" /></el-form-item></el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12"><el-form-item label="水泥浆稠度(s)" prop="snjcd"><el-input v-model="form.snjcd"
                placeholder="水泥浆稠度(s)" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="泌水率(%)" prop="msl"><el-input v-model="form.msl"
                placeholder="泌水率(%)" /></el-form-item></el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12"><el-form-item label="环境温度(℃)" prop="hjTemp"><el-input v-model="form.hjTemp"
                placeholder="环境温度(℃)" /></el-form-item></el-col>
          <el-col :span="12"><el-form-item label="浆液温度(℃)" prop="jyTemp"><el-input v-model="form.jyTemp"
                placeholder="浆液温度(℃)" /></el-form-item></el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="压浆顺序图" prop="fileUrl">
              <imageUpload ref="fileUrlUpload" v-model="form.imgUrl" :limit="1" @input='successImg' />
            </el-form-item>
          </el-col>
        </el-row>

        <el-table border :data="form.list">
          <el-table-column label="孔道编号" align="center" prop="stepParameters">
            <template slot-scope="scope">
              <el-input v-model="scope.row.stepParameters" placeholder="请输入" maxlength="40"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="通过情况" align="center" prop="tgCondition">
            <template slot-scope="scope">
              <el-input v-model="scope.row.tgCondition" placeholder="请输入" maxlength="40"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="冒浆情况" align="center" prop="mjCondition">
            <template slot-scope="scope">
              <el-input v-model="scope.row.mjCondition" placeholder="请输入" maxlength="40"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editSubmitForm">确 定</el-button>
        <el-button @click="centerDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog> -->

    <!-- 压浆修改 -->
    <el-dialog :title="titleYj" :visible.sync="openYj" width="40%" append-to-body>
      <el-form ref="formYj" :model="formYj" :rules="rulesYj" label-width="90px">
        <!--   信息   -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="梁场名称" prop="deviceName">
              <el-input v-model="formYj.deviceName" placeholder="请输入梁场名称" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="设备名称" prop="instrumentManufacturer">
              <el-input v-model="formYj.instrumentManufacturer" placeholder="请输入设备名称" disabled />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="设备编号" prop="mCode">
              <el-input v-model="formYj.mCode" placeholder="请输入设备编号" disabled />
            </el-form-item>
          </el-col>
        </el-row>

        <!--     修改   -->
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="张拉梁型" prop="tensioningBeamType">
              <el-input v-model="formYj.tensioningBeamType" placeholder="请输入张拉梁型" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="梁号" prop="beamNumber">
              <el-input v-model="formYj.beamNumber" placeholder="请输入梁号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="桩号" prop="pileNumber">
              <el-input v-model="formYj.pileNumber" placeholder="请输入桩号" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoadingYj" type="primary" @click="submitFormYj">确 定</el-button>
        <el-button @click="cancelYj">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listRecord, getRecord, delRecord, addRecord, updateRecord, listZnyj_result, processDataEcharts } from "@/api/znzlyj/record";
import { getReportDetail, getGroutingReportEdit, putGroutingReportEdit, isQualifiedList, handCheckGrouting, processData } from "@/api/znzlyj/record";
import { testCollectData } from "@/api/zhgd/hntManage";

import ReportRender from "@/views/ReportDesign/components/ReportRender/ReportRender"
import deatetime from "@/components/Datetime"; // 施工日期
import workSiteLeft from "@/views/components/workSiteLeft";
import TabsRender from "@/views/ReportDesign/TabsRender/TabsRender";
import { businessDeptTreeTop } from "@/api/common/common";
import {
  codeList,
  getRecording,
  listHoleNumberSjfx,
  materielDeviceListAll,
  updateRecording
} from "@/api/znzlyj/recording";

import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme

export default {
  name: "Record",
  data() {
    return {
      uploadImgYjDialog: false,
      dialogVisible_reportEdit: false,
      warningLoading: false,
      checkLoading: false,
      dialogVisible_report: false,
      statusList: [
        { id: "0", name: "不合格" },
        { id: "1", name: "合格" },
      ],
      codeList: [],
      // dayChart: null,
      processDayChart: null,
      show: true,
      rowObj: {
        T1: 3,
        T2: 24,
        T3: 21,
        T4: 24,
        F1: 0,
        F2: 0,
        F3: 24,
        F4: 24,
      },
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      processLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      totalTwo: 0,
      totalProcess: 0,
      // 压浆记录表格数据
      recordList: [],
      // 压浆结果表格数据
      znyj_resultList: [],
      processList: [],
      linkCode: "",
      baseCode: "",
      type: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      processOpen: false,
      // 报表编辑
      centerDialogVisible: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        beamNumber: undefined,
      },
      queryParamsTwo: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParamsProcess: {
        pageNum: 1,
        pageSize: 10,
      },
      // 表单参数
      form: {
        id: "",
        pileNumber: "",
        beamNumber: "",
        sgDate: "",
        // sgDate: new Date().toLocaleDateString(),
        snpzbh: "",
        wjj: "",
        snjcd: "",
        msl: "",
        hjTemp: "",
        jyTemp: "",
        fileUrl: '',
        list: [],
      },
      imgForm: {
        fileUrl: '',
      },
      // 表单校验
      rules: {
        id: [{ required: true, message: "id不能为空", trigger: "blur" }],
      },
      editId: '',
      materielDeviceList: [],
      titleYj: undefined,
      openYj: false,
      formYj: {},
      rulesYj: {
        tensioningBeamType: [{ required: true, message: "张拉梁型不能为空", trigger: "blur" }],
        beamNumber: [{ required: true, message: "梁号不能为空", trigger: "blur" }],
        pileNumber: [{ required: true, message: "桩号不能为空", trigger: "blur" }],
      },
      buttonLoadingYj: false,
    };
  },
  components: {
    deatetime,
    workSiteLeft,
    TabsRender,
    ReportRender
  },
  created() {
    this.getList();
    this.getMaterielDeviceListAll('')
    this.getCodeList();
  },
  methods: {
    //采集数据测试
    handleCollectData() {
      this.$confirm('正式系统禁止采集数据！', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass:'confirm-model',
        type: 'warning',
      }).then(_ => {
        this.warningLoading = true
        testCollectData('yj', this.queryParams.id).then(res => {
          this.warningLoading = false
          this.getList()
        }).catch((err) => {
          this.warningLoading = false
          this.getList()
        })
      })
    },
    // 梁场列表
    getMaterielDeviceListAll(code) {
      materielDeviceListAll({
        baseCode: code
      }).then((res) => {
        this.materielDeviceList = res.rows || []
      })
    },
    // 梁场设备编号
    getCodeList(code) {
      codeList({
        type: '2',
        baseCode: code
      }).then((res) => {
        this.codeList = []
        const list = res.data || []
        list.forEach(item => {
          this.codeList.push({id: item.id, name: item.code})
        })
      })
    },
    // 保留两位小数
    fun(val) {
      return Number(val).toFixed(1);
    },
    // 左侧树点击事件
    showLeft(show) {
      this.show = !show;
    },
    queryVal(val) {
      this.znyj_resultList = [];
      this.queryParams.id = val.id;
      this.queryParams.deviceName = "";
      this.getMaterielDeviceListAll(val.code)
      this.getCodeList(val.code)
      this.handleQuery();
    },
    /** 查询压浆记录列表 */
    getList() {
      this.loading = true;
      listRecord(this.queryParams).then((response) => {
        this.recordList = response.data.records;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        pileNumber: undefined,
        beamNumber: undefined,
        sgDate: undefined,
        snpzbh: undefined,
        wjj: undefined,
        snjcd: undefined,
        msl: undefined,
        hjTemp: undefined,
        jyTemp: undefined,
        fileUrl: undefined,
        list: [],
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams = this.getSearchParams();
      this.queryParams.pageNum = 1;
      this.getList();
    },
    getSearchParams() {
      const params = {};
      for (const key in this.queryParams) {
        if (key === "time") {
          const time = this.queryParams[key];
          if (time && time.length === 2) {
            params.startTime = time[0];
            params.endTime = time[1];
          }
        } else {
          params[key] = this.queryParams[key];
        }
      }
      return params;
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.getMaterielDeviceListAll('')
      this.getCodeList('')
      this.$refs.workSiteLeft.resetQuery();
      this.queryParams.id = "";
      this.queryParams.deviceName = "";
      this.$refs.deatetime.startTime = null;
      this.$refs.deatetime.endTime = null;
      this.queryParams.time = [];
      this.queryParams.startTime = "";
      this.queryParams.endTime = "";
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    // 手动校验
    handleCheck() {
      this.$confirm('正式系统禁止手动预警！', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        customClass:'confirm-model',
        type: 'warning',
      }).then(_ => {
        this.checkLoading = true
        if (this.ids.length) {
          handCheckGrouting({ ids: this.ids }).then((res) => {
            this.checkLoading = false
            if (res.code == 200) {
              this.$message.success('手动校验成功！')
              this.resetQuery()
            } else {
              this.$message.error('手动校验失败！')
            }
          }).catch(
            (err) => {
              this.$message.error('手动校验失败！')
              this.checkLoading = false
            }
          )
        } else {
          this.checkLoading = false
          this.$message.error('请先在表格内勾选您要校验的数据！')
        }
      })

      // this.checkLoading = true
      // businessDeptTreeTop().then((res) => {
      //   let arr = res.data.map((v) => v = v.id.toString())
      //   isQualifiedList({
      //     deptIdList: arr
      //   }).then((res) => {
      //     this.checkLoading = false
      //     if (res.code == 200) {
      //       this.$message.success('手动校验成功！')
      //       this.resetQuery()
      //     } else {
      //       this.$message.error('手动校验失败！')
      //     }
      //   })
      //     .catch(
      //       (err) => {
      //         this.$message.error('手动校验失败！')
      //         this.checkLoading = false
      //       }
      //     )
      // })

    },
    // 点击报表编辑按钮
    result_handleUpdate(row) {
      this.dialogVisible_reportEdit = true
      this.editId = row.id;
      this.$nextTick(() => {
        this.$refs.ReportRender.editInit("grouting_report", {
          id: row.id,
          // reportId: "1728231971352539138",
          beamNumber: row.beamNumber,
        });
      });
      // this.editId = row.id
      // getGroutingReportEdit(row.id).then((res1) => {
      //   if (res1.data != null) {
      //     this.form = res1.data || {}
      //     res1.data.sgDate ? this.form.sgDate = res1.data.sgDate : this.form.sgDate = new Date()
      //     this.form.imgUrl = res1.data.fileUrl ? [{ name: '压浆顺序图' + Date.now(), url: res1.data.fileUrl, ossId: res1.data.fileId }] || [] : ''
      //     console.log(this.form.imgUrl);
      //   } else {
      //     this.reset();
      //   }
      //   getReportDetail({ beamNumber: row.beamNumber }).then((res2) => {
      //     this.form.list = res2.data;
      //     this.centerDialogVisible = true;
      //   })
      // })
    },
    // 添加压浆顺序图
    uploadImgYj() {
      this.uploadImgYjDialog = true
    },
    // 报表编辑保存
    save() {
      // 这个代码就是 取 报表设置的参数
      var dataBb = this.$refs.ReportRender.editSave()
      var obj = dataBb.dataReturn[0]
      obj.id = this.editId;
      putGroutingReportEdit(obj).then((response) => {
        this.$modal.msgSuccess("修改成功");
      }).finally(() => {
        this.dialogVisible_reportEdit = false;
      });
    },
    // 删除图片 && 上传结束回调
    successImgForm(data, val) {
      if (val.length) {
        this.imgForm.fileUrl = val[0].url;
        this.imgForm.fileId = data;
        this.imgForm.imgUrl = val
      } else {
        this.imgForm.fileUrl = ''
        this.imgForm.fileId = ''
        this.imgForm.imgUrl = []
        putGroutingReportEdit(this.imgForm).then((response) => {

        });
      }


    },
    //压浆顺序图确定按钮
    editSubmitFormImg() {
      this.$refs["imgForm"].validate((valid) => {
        if (valid) {
          this.imgForm.id = this.editId
          console.log(this.imgForm);
          putGroutingReportEdit(this.imgForm).then((response) => {
            this.$modal.msgSuccess("压浆顺序图修改成功,请到报表预览中查看！");
          }).finally(() => {
            this.uploadImgYjDialog = false
          });
        }
      });
    },
    // 删除图片 && 上传结束回调
    successImg(data, val) {
      if (val.length) {
        this.form.fileUrl = val[0].url;
        this.form.fileId = data;
        this.form.imgUrl = val
      } else {
        this.form.fileUrl = ''
        this.form.fileId = ''
        this.form.imgUrl = []
        putGroutingReportEdit(this.form).then((response) => {

        });
      }
    },
    // 报表编辑确定按钮
    editSubmitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.form.id = this.editId
          console.log(this.form);
          putGroutingReportEdit(this.form).then((response) => {
            this.$modal.msgSuccess("修改成功");
            console.log("成功", this.form.sgDate)
          }).finally(() => {
            this.centerDialogVisible = false;
            this.uploadImgYjDialog = false
          });
        }
      });
    },
    centerDialogVisibleClose() {
      this.centerDialogVisible = false;
      this.uploadImgYjDialog = false
      this.form = {} || null
      // this.$refs.fileUrlUpload.fileList = []
    },
    // 点击结果数据列表
    result_handleDetails(row) {
      this.open = true;
      this.linkCode = row.linkCode;
      this.baseCode = row.baseCode;
      listZnyj_result({ ...this.queryParamsTwo, linkCode: this.linkCode, baseCode: this.baseCode }).then((response) => {
        this.znyj_resultList = response.data.records;
        this.totalTwo = response.data.total;
      });
    },
    // 点击修改
    handleEdit(row) {
      this.loading = true;
      this.reset();
      const id = row.id
      getRecord(id).then(response => {
        this.loading = false;
        this.formYj = response.data;
        this.$set(this.formYj, 'deviceName', row.deviceName);
        this.$set(this.formYj, 'instrumentManufacturer', row.instrumentManufacturer);
        this.$set(this.formYj, 'mCode', row.mCode);
        this.openYj = true;
        this.titleYj = "修改压浆数据";
      });
    },
    // 打印
    print() {
      // this.$refs.TabsRender.print();
      this.$refs.ReportRender.print();
    },
    rederOver() {
      setTimeout(() => {
        const element = this.$refs.dialogReportForms;
        element.$el.classList.add("render-report");
      }, 0);
    },
    handleReportForms(row) {
      this.dialogVisible_report = true;
      // this.$nextTick(() => {
      //   this.$refs.TabsRender.init("grouting_report", {
      //     id: row.id,
      //     reportId: "1728231971352539138",
      //     beamNumber: row.beamNumber,
      //   });
      // });
      this.$nextTick(() => {
        this.$refs.ReportRender.editDataRender("grouting_report", {
          id: row.id,
          reportId: "1728231971352539138",
          beamNumber: row.beamNumber,

        });
      });

    },
    getDetailsList() {
      listZnyj_result({ ...this.queryParamsTwo, linkCode: this.linkCode, baseCode: this.baseCode }).then((response) => {
        this.znyj_resultList = response.data.records;
        this.totalTwo = response.data.total;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.open = false;
      // this.buttonLoading = true;
      // if (this.form.id != null) {
      //   updateRecord(this.form).then((response) => {
      //     this.$modal.msgSuccess("修改成功");
      //     this.open = false;
      //     this.getList();
      //   }).finally(() => {
      //     this.buttonLoading = false;
      //   });
      // } else {
      //   addRecord(this.form).then((response) => {
      //     this.$modal.msgSuccess("新增成功");
      //     this.open = false;
      //     this.getList();
      //   }).finally(() => {
      //     this.buttonLoading = false;
      //   });
      // }

    },
    submitFormYj() {
      this.$refs["formYj"].validate(valid => {
        if (valid) {
          this.buttonLoadingYj = true;
          if (this.formYj.id != null) {
            updateRecord(this.formYj).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.openYj = false;
              this.getList();
            }).finally(() => {
              this.buttonLoadingYj = false;
            });
          } else {
            this.$modal.msgSuccess("修改失败");
          }
        }
      });
    },
    cancelYj() {
      this.openYj = false;
      this.resetYj();
    },
    resetYj() {
      this.$refs['formYj'].resetFields();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download("zhgd/record/export", {
        ...this.queryParams,
      }, `record_${new Date().getTime()}.xlsx`);
    },
    // 点击过程数据列表
    process_handleDetails(row) {
      this.processOpen = true
      this.$set(this.queryParamsProcess, 'id', row.id)
      processData({ ...this.queryParamsProcess }).then(
        (response) => {
          this.processList = response.rows;
          this.totalProcess = response.total;
          this.processLoading = false;
        }
      );
      // Echart图
      processDataEcharts({ id: row.id}).then((response) => {
        if (document.getElementById("processDayChart")) {
          this.createDayChart(response);
        } else {
          this.$nextTick(() => {
            this.createDayChart(response);
          });
        }
      });
    },
    createDayChart(data) {
      if (null == this.processDayChart) {
        this.processDayChart = echarts.init(document.getElementById("processDayChart"));
      } else {
        this.processDayChart.clear();
      }
      let processDateX = [];
      let aData = [];
      let bData = [];
      let cData = [];
      let dData = [];
      if (!!data) {
        processDateX = data.processDateX;
        aData = data.enterPressure;
        bData = data.returnPressure;
        cData = data.vacuumPressure;
        dData = data.flow;
      }
      let option = this.getLineOption(processDateX, aData, bData, cData, dData);
      this.processDayChart.setOption(option);
    },
    /*** 获取图表配置信息*/
    getLineOption(processDateX, aData, bData, cData, dData) {
      const colors = [ "#c23531", "#2f4554", "#61a0a8", "#d48265"];
      let option = {
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross" },
        },
        title: {
          textStyle: { paddingLeft: 100 },
        },
        legend: {
          data: [ "注浆口压力", "回浆口压力", "真空泵压力", "流量" ],
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            data: processDateX,
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "压力(Mpa)",
            position: "left",
            axisLine: {
              lineStyle: {},
            },
          },
        ],
        grid: {
          top: 60,
          left: "5%",
          right: "2%",
        },
        series: [
          {
            name: "注浆口压力",
            type: "line",
            data: aData,
            smooth: true
          },
          {
            name: "回浆口压力",
            type: "line",
            data: bData,
            smooth: true
          },
          {
            name: "真空泵压力",
            type: "line",
            data: cData,
            smooth: true
          },
          {
            name: "流量",
            type: "line",
            data: dData,
            smooth: true
          },
        ],
      };
      return option;
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .query {
  .el-form-item__label {
    width: 100px !important;
  }
}

.elForm {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
}

.head-container {
  text-align: center;

  .el-select {
    width: calc(100vw * 280 / 2100);
  }
}

// Echart图
.chartBox {
  height: 400px;
  width: 100%;
  position: relative;
  margin-top: 80px;
}

.chartBoxHeight {
  height: 400px;
  width: 100%;
  position: relative;
}

.chartSearch {
  position: absolute;
  top: 0px;
  right: 60px;
}
</style>
<style>
.confirm-model{
.el-message-box__btns {
.el-button:nth-child(1) {
  float:right;
}
.el-button:nth-child(2) {
  margin-right:10px;
  /*background-color:#2d8cf0;*/
  /*border-color:#2d8cf0;*/
}
}
}
</style>
